<template>
  <div>
    <div>
      <div class="shouye">
        <div class="blue"></div>
        <h1>门诊消费记录</h1>
        <div class="cha">
           <div>
                 <el-input  placeholder="输入病人姓名"  style="width: 180px" v-model="teacherQuery.name">
                 </el-input>
           </div>

           <div style="margin-left: 20px">
                 <el-date-picker
                   style="width:250px"
                   v-model="teacherQuery.begin"
                   type="datetime"
                   placeholder="选择开始日期"
                   default-time="12:00:00"
                   value-format="yyyy-MM-dd HH:mm:ss"
                 >
                 </el-date-picker>
           </div>

           <div style="margin-left: 20px">
                 <el-date-picker
                   style="width:250px"
                   v-model="teacherQuery.end"
                   type="datetime"
                   placeholder="选择日期"
                   default-time="12:00:00"
                   value-format="yyyy-MM-dd HH:mm:ss"
                 >
                 </el-date-picker>
           </div>

           <el-button
             slot="append"
             icon="el-icon-search"
             @click="getList()"
           ></el-button>
         </div>

      </div>

      <br/>
    </div>

    <!--店铺全查-->
    <el-row :gutter="20">

      <!-- 表格 -->
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        element-loading-text="数据加载中"
        fit
        highlight-current-row
        @selection-change="handleSelectionChange"
      >

        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column align="center" label="序号" width="70">
          <template slot-scope="scope">
            {{
              (teacherQuery.page - 1) * teacherQuery.limit + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="thePatient.name" label="患者姓名" align="center"></el-table-column>
        <el-table-column
          prop="creationTime"
          label="缴费时间"  width="180px" align="center"
        ></el-table-column>
        <el-table-column
          prop="thePatient.number"
          label="订单号" width="160px"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="thePatient.phone"
          label="就诊人手机号" width="120px"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="thePatient.number"
          align="center"
          label="就诊人身份证号" width="160px"
        ></el-table-column>
        <el-table-column
          prop="patientCard.cardNo"
          label="就诊卡号" width="120px"
          align="center"
        ></el-table-column>
        <el-table-column prop="thePatient.relation" label="关系" align="center"></el-table-column>
        <el-table-column prop="rechargeExplain" label="业务类型" align="center"></el-table-column>

        <el-table-column prop="money" label="支付金额" align="center"></el-table-column>
<!--        <el-table-column prop="modificationTime" label="缴费时间" width="180px" align="center"></el-table-column>-->
        <el-table-column prop="patientCard.balance" label="卡内余额" align="center"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="s">
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="hesuanxiangqing(s.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>


      <!-- 分页 -->
      <el-pagination
        :current-page="teacherQuery.page"
        :page-size="teacherQuery.limit"
        :page-sizes="[3, 5, 8, 10]"
        :total="total"
        background
        layout="total, sizes ,prev, pager, next, jumper"
        style="padding: 30px 0; text-align: center"
        @current-change="getList"
        @size-change="handleSizeChange"
      />


    </el-row>
  </div>
</template>

<script>

export default {
  data() {
    //定义变量和初始值
    return {
      list: null, //查询之后接口返回集合
      total: 0, //总记录数vu
      teacherQuery: {
        page: 1, //当前页
        limit: 5, //每页记录数
        consumptionName: "挂号缴费",
      }, //条件封装的对象
      loading: false,//上传的loading
      listLoading: false,//上传的loading


      pageNum: 0,
      pageSize: 5,
      medicalAppointmentList: [],
      createtime: "",
      timeeee: null,
      endtimeeee: null
    };
  },
  created() {
    //页面渲染之前执行，一般调用methods定义的方法
    this.getList();
    // this.getAllmedicalAppointmentList();
  },
  methods: {
    handleSizeChange(limit) {
      console.log(limit);

      this.teacherQuery.limit = limit;
      this.getList();
    },
    getList(page = 1) {
      this.teacherQuery.page = page;
      // this.$axios({
      //   method: 'post',
      //   url:"//studentVue/StudentfindAllormodil",
      //   data:  this.teacherQuery
      // })

      //   this.$axios
      //     .post("/record/record/record/findAllCon", {
      //       limit: this.pageSize,
      //       page: this.pageNum,
      //       consumptionName:"挂号缴费",
      //       begin: this.timeeee,
      //       end: this.endtimeeee
      //     })
      //
      //     .then(res => {
      //       if (res.data.code == 20000) {
      //         this.medicalAppointmentList = res.data.data.rows;
      //         this.total = res.data.data.total;
      //         this.pageNum = res.data.data.pageResult.pageNum;
      //         this.pageSize = res.data.data.pageResult.pageSize;
      //       }
      //     })
      //     .catch(res => {
      //       console.log("出错了");
      //       console.log(res);
      //     });


      this.$axios
        .post("/record/record/record/findAllCon",
          this.teacherQuery
        )
        .then((response) => {
          //response 接口返回数据
          // console.log(response)
          this.list = response.data.data.rows;
          this.total = response.data.data.total;
          this.listLoading = false  //记得：否显示loading信息
          // console.log(response.data.rows);
          // console.log(response.data.total);
        }) //请求成功
        .catch((error) => {
          console.log(error);
        }); //请求失败
    },
// 条件清空
    resetData() {
      this.teacherQuery = {
        page: 1, //当前页
        limit: 6, //每页记录数
      };
      this.getList();
    },


    // handleSizeChange(val) {
    //   this.pageSize = val;
    //   this.getAllmedicalAppointmentList();
    // },
    // handleCurrentChange(val) {
    //   this.pageNum = val;
    //   this.getAllmedicalAppointmentList();
    // },
    // getAllmedicalAppointmentList() {
    //   this.$axios
    //     .post("/record/record/record/findAllCon", {
    //       limit: this.pageSize,
    //       page: this.pageNum,
    //       consumptionName:"挂号缴费",
    //       begin: this.timeeee,
    //       end: this.endtimeeee
    //     })
    //
    //     .then(res => {
    //       if (res.data.code == 20000) {
    //         this.medicalAppointmentList = res.data.data.rows;
    //         this.total = res.data.data.total;
    //         this.pageNum = res.data.data.pageResult.pageNum;
    //         this.pageSize = res.data.data.pageResult.pageSize;
    //       }
    //     })
    //     .catch(res => {
    //       console.log("出错了");
    //       console.log(res);
    //     });
    // },
    hesuanxiangqing(id) {
      //传id
      localStorage.setItem("id", JSON.stringify(id));

      // alert(id)
      this.$router.push("/consumptiondingdans?");
    }
  }
};
</script>

<style>
.shouye {
  margin-top: 10px;
}

.blue {
  width: 36px;
  height: 12px;
  background-color: blue;
  float: left;
  margin-left: 20px;
  margin-top: 6px;
  border-radius: 50px;
}

.shouye h1 {
  float: left;
  margin-top: -4px;
  margin-left: 10px;
}

.cha {
  margin-left: 200px;
  display: flex;
}




</style>
